<template>
	<div class="">
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
			
			<listTpml 
				ref="listTpml"
				:data="pageData" 
				@onCommand="listCommand"
				></listTpml>
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			
			<addJQDialog ref="addJQDialog"  @addSucess="refresh"></addJQDialog>
			
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
import listTpml from "@/view/components/listTmpl";

import addJQDialog from "@/view/components/dialog/addJQDialog";

import { apiUrls, remove } from "@/service/swagger/ResourceClusterController";
import { getDashboardById } from "@/service/swagger/ClusterDashboardController";
export default {
	components: {
		listTpml,
		addJQDialog,
	},
	data() {
		return {
			pageData: {

				// 页面主标题
				pageTitle: "集群管理",

				// 过滤设置
				filterOption: [
					{
						label: "名称",
						paramsName: "clusterName",
						defaultValue: "",
						componentsName: "nameInput",
					}
				],

				// 列表table 设置
				listOption: {

					// 列表上部btn组
					listBtns: [{
						label: "添加集群",
						iconfont: "icon-folder-add",
						commandName: "addJQ",
					},],
					// 列表api
					listApi: {
						url: apiUrls.getClusterList,
						type: "POST"
					},

					// 表头设置
					header: [{
						label: "名称",
						width: "",
						propName: "clusterName",
						align: "left",
					}, {
						label: "类型",
						width: "",
						propName: "clusterType",
						html: (row) => {
							if (row.clusterType == 'dev') {
								return `<span>开发环境</span>`
							}
						}
					},{
						label : "主机数" ,
						propName : "hostCount",
					},{
						label : "可用主机数" ,
						propName : "useHostCount",
					},
				  {
						label : "内存" ,
						propName : "memory",
					},{
						label : "磁盘" ,
						propName : "disk",
					},
					{
						label:"备注",
						propName : "description",
					},
					{
						label : "操作" ,
						width : "",
						btns : [{
							label : "详情",
							commandName : "goDetail",
						},{
							label : "删除",
							commandName : "deleteJQ",
						}],
						btnGroups: []
					}]
				}
			}
		}
	},
	mounted() {
	},
	methods: {
		listCommand(command, row, index) {
			// console.log("列表进行了操作：", command,row,index );
			if (command && this[command]) {
				this[command](row, index);
			}

		},
		refresh() {
			this.$refs.listTpml.refresh();
		},

		// command : addJQ 
		addJQ(row, index) {
			this.$refs.addJQDialog.open();
		},

		// command : goDetail 
		goDetail(row, index) {
			this.$router.push({
				path :"jq/xq",
				query:{
					id : row.id,
					clusterName:row.clusterName
				}
			})
		},
		listLoaded(tableData) {
			var arr = []
			tableData.forEach(el => {
				getDashboardById({
					id : el.id
				}).then(ret => {
					if (ret && ret.data && ret.code == 0) {
						if (ret.data.id = el.id) {
							el.memory = ret.data.memoryUsed + '/' + ret.data.memoryTotal  //内存
							el.disk = ret.data.diskUsed + '/' + ret.data.diskTotal //磁盘
							arr.push(el)
						}
					}
				})
			})
			this.$refs.listTpml.loadTableData(arr)
		},
		// command : deleteJQ 
		deleteJQ(row, index) {

			this.$confirm("此操作将永久删除该集群,是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				remove({
					id: row.id
				}).then(ret => {
					if (ret.code === 0) {
						this.$message({
							message: "删除成功",
							type: "success"
						});
						this.refresh();
					}
				});
			});

		},

	}
}
</script>

<style>
</style>